<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册 - 甲壳虫社区</title>
    <head th:replace="fragment/import::common"></head>
</head>
<body class="register-body">
<div class="login-main">
    <div class="login-page container-fluid">
        <div class="row login-page-main">
            <div class="login-left col-lg-8 col-md-8 col-sm-8 col-xs-8">
                <div class="login-logo">
                    <b><a class="logo" th:href="@{/}">Beetle Community</a></b>
                </div>
                <form id="register-form" class="login-form" action="/register" method="post"
                      data-validator-option="{theme:'yellow_right_effect', stopOnError:true}">
                    <div class="form-group">
                        <label for="register-email">
                            <img src="/icons/envelope-open.svg" class="login-icon">&nbsp;邮箱
                        </label>
                        <input type="email" class="form-control" id="register-email" placeholder="Email" name="email"
                               data-rule="邮箱:required; email">
                    </div>
                    <div class="form-group">
                        <label for="register-pwd">
                            <img src="/icons/lock.svg" class="login-icon">&nbsp;密码
                        </label>
                        <input type="password" class="form-control" id="register-pwd" placeholder="Password" name="password"
                               data-rule="密码:required;length(6~16)">
                    </div>
                    <div class="form-group">
                        <label for="register-code">
                            <img src="/images/code.svg" class="login-icon">&nbsp;验证码
                            <button id="send-email-btn" type="button" class="btn btn-success btn-xs send-email-btn" onclick="sendRegisterEmail()">获取验证码</button>
                        </label>
                        <input type="text" class="form-control" id="register-code" placeholder="Verification Code" name="code"
                               data-rule="验证码:required;length(6)">
                    </div>
                    <div>
                        <span class="red" th:text="${registerInfo}"></span>
                        <button type="submit" class="btn btn-primary btn-publish">注册</button>
                    </div>
                </form>
            </div>
            <div class="login-right col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <div class="login-other-all">
                    <h4>第三方账号登录</h4>
                    <a th:href="@{https://github.com/login/oauth/authorize(client_id=${@environment.getProperty('github.client_id')},redirect_uri=${@environment.getProperty('github.redirect_uri')},scope='user',state='githublogin')}"
                        class="login-other">
                        <img src="/images/github.svg" class="login-icon">
                        Github登录
                    </a>
                    <a th:href="@{https://gitee.com/oauth/authorize(client_id=${@environment.getProperty('gitee.client_id')},redirect_uri=${@environment.getProperty('gitee.redirect_uri')},response_type='code',scope='user_info',state='giteelogin')}"
                       class="login-other">
                        <img src="/images/gitee.svg" class="login-icon">
                        Gitee登录
                    </a>
                    <a th:href="@{https://graph.qq.com/oauth2.0/authorize(response_type='code',client_id=${@environment.getProperty('qq.client_id')},redirect_uri=${@environment.getProperty('qq.redirect_uri')},state='qqlogin')}"
                       class="login-other">
                        <img src="/images/QQ.svg" class="login-icon">
                        QQ登录
                    </a>
                </div>

            </div>
        </div>
        <div class="login-page-footer">
            <img src="/icons/info.svg" class="login-icon">&nbsp;
            <b>已有账号? <a href="/login">去登陆</a>&nbsp;或者&nbsp;<a href="/">以游客身份访问</a></b>
        </div>
    </div>
</div>
<!--聊天室-->
<div th:replace="fragment/chatroom::chatroom"></div>
<!--页尾-->
<div th:replace="fragment/footer::beetle_footer"></div>
<script>
    $(function(){
        customTheme();
    });
</script>
</body>
</html>